$themes: (
  // 天空蓝
  cutsomSkyBlue: (
    headerBgImage:linear-gradient(to right, #2287d4 0%, #2287d4 100%),
    headerTextColor:#fff,
    sideBgImage:linear-gradient(to bottom, #274078 0%, #1c2e57 100%),
    sideActiveImage:linear-gradient(to right, #2287d4 0%, #31bdec 100%),
    boxShadow: 0 0 2px #2287d4 !important,
    sideTextColor:#fff,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#fff,
    sideIconColor:#fff,
    tabsTextColor:#3EC8FD,
    tableHeaderBgColor:#d9d9d9,
    tableHeaderTextColor:black,
    color: white,
    twoMenuBg: rgb(0, 145, 255, 0.1) !important,
    twoMenuColor: #0091ff !important,
    customDrawerTitleBorderBottom: 1px solid #049eff,
    tableHeaderSelectedColor: #409EFF
  ),
  // 深蓝
  cutsomDarkBlue: (
    headerBgImage:linear-gradient(to right, #174bb0 0%, #265dc8 100%),
    headerTextColor:#fff,
    sideBgImage:linear-gradient(to bottom, #274078 0%, #1c2e57 100%),
    sideActiveImage:linear-gradient(to right, #34d6ff 0%, #718bfc 100%),
    boxShadow: 0 0 2px #174bb0 !important,
    sideTextColor:#fff,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#fff,
    sideIconColor:#fff,
    tabsTextColor:#3EC8FD,
    tableHeaderBgColor:#718bfc,
    tableHeaderTextColor:white,
    color: white,
    twoMenuBg: rgba(0, 42, 255, 0.1) !important,
    twoMenuColor: #718bfc !important,
    customDrawerTitleBorderBottom: 1px solid #718bfc,
    tableHeaderSelectedColor: #ad00f5
  ),
  // 浅色
  cutsomLight: (
    headerBgImage:linear-gradient(to right, #ffffff 0%, #e5f3ff 100%),
    headerTextColor:#001b36,
    sideBgImage:linear-gradient(to bottom, #028176 0%, #015e6a 100%),
    sideActiveImage:linear-gradient(to right, #08b0a5 0%, #63f6ed 100%),
    boxShadow: 0 0 2px #63f6ed !important,
    sideTextColor:#fff,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#fff,
    sideIconColor:#fff,
    tabsTextColor:#15BAAF,
    tableHeaderBgColor:#08b0a5,
    tableHeaderTextColor:white,
    color: black,
    twoMenuBg: rgba(3, 194, 180, 0.1) !important,
    twoMenuColor: #08b0a5 !important,
    customDrawerTitleBorderBottom: 1px solid #08b0a5,
    tableHeaderSelectedColor: #00fdff
  ),
  // 浅蓝
  cutsomLightBlue: (
    headerBgImage:linear-gradient(to right, #004ffc 0%, #3d7bfa 100%),
    headerTextColor:#fff,
    sideBgImage:linear-gradient(to bottom, #ffffff 0%, #d4dcea 100%),
    sideActiveImage:linear-gradient(to right, #3d7bfa 0%, #34bfff 100%),
    boxShadow: 0 0 2px #34bfff !important,
    sideTextColor:#040f27,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#3d7bfa,
    sideIconColor:#3d7bfa,
    tabsTextColor:#3C7FF9,
    tableHeaderBgColor:#3C7FF9,
    tableHeaderTextColor:white,
    color: white,
    twoMenuBg: rgba(30, 179, 255, 0.1) !important,
    twoMenuColor: #3d7bfa !important,
    customDrawerTitleBorderBottom: 1px solid #3d7bfa,
    tableHeaderSelectedColor: #06ff00
  ),
  // 湖蓝
  customLakeBlue: (
    headerBgImage:linear-gradient(to right, #057e8b 0%, #07adbf 100%),
    headerTextColor:#fff,
    sideBgImage:linear-gradient(to bottom, #04616e 0%, #02455b 100%),
    sideActiveImage:linear-gradient(to right, #009cad 0%, #0ebfd2 100%),
    boxShadow: 0 0 2px #009cad !important,
    sideTextColor:#fff,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#fff,
    sideIconColor:#fff,
    tabsTextColor:#009DB1,
    tableHeaderBgColor:#009cad,
    tableHeaderTextColor:white,
    color: white,
    twoMenuBg: rgba(4, 97, 110, 0.1) !important,
    twoMenuColor: #009cad !important,
    customDrawerTitleBorderBottom: 1px solid #009cad,
    tableHeaderSelectedColor: #00fdff
  ),
  // 深色
  customDark: (
    headerBgImage:linear-gradient(to right, #070e21 0%, #114a76 100%),
    headerTextColor:#fff,
    sideBgImage:linear-gradient(to bottom, #070e21 0%, #103f64 100%),
    sideActiveImage:linear-gradient(to bottom, #070e21 0%, #103f64 100%),
    boxShadow: 0 0 2px #0d2844 !important,
    sideTextColor:#fff,
    sideActiveTextColor:#fff,
    sideSubActiveTextColor:#fff,
    sideIconColor:#fff,
    tabsTextColor:#2593D2,
    tableHeaderBgColor:#070e21,
    tableHeaderTextColor:white,
    color: white,
    twoMenuBg: rgba(4, 24, 44, 0.1) !important,
    twoMenuColor: #103f64 !important,
    customDrawerTitleBorderBottom: 1px solid #103f64,
    tableHeaderSelectedColor: #ff7100
  )
);
$curTheme: cutsomDarkBlue;
@mixin useTheme() {
  @each $key, $value in $themes {
    $curTheme: $key !global;
    html[data-theme='#{$key}'] & {
      @content;
    }
  }
}

@function getVar($key) {
  $themeMap: map-get($themes, $curTheme);
  @return map-get($themeMap, $key);
}
